<template>
  <div class="flex mb-4">
    <input
      v-model="newTodo"
      type="text"
      placeholder="添加新的待办事项"
      class="flex-1 border border-gray-300 rounded-l p-2"
    />
    <button
      @click="addTodo"
      class="bg-blue-500 text-white px-4 py-2 rounded-r"
    >
      添加
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';

const newTodo = ref('');
const emits = defineEmits<{
  (e: 'add-todo', newTodo: string): void;
}>();

const addTodo = () => {
  if (newTodo.value.trim()) {
    emits('add-todo', newTodo.value);
    newTodo.value = '';
  }
};
</script>    